<template>
  <div id="app">
    <el-container>
      <el-header>
        <img alt="Vue logo" src="./assets/logo.png" />
        <h3>股票预测系统</h3>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="24">
              <h5>菜单选项</h5>
              <el-menu default-active="2" class="el-menu-vertical-demo">
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>查看股票具体信息</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="1-2">
                      <router-link to="/AI">股票</router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>查看图表信息</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="2-2">
                      <router-link to="/jiqiecharts">股票行情图表</router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                <el-submenu index="3">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>股票预测</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="3-2">
                      <router-link to="/jiqixuexiform">预测股票价格</router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
body {
  padding: 0;
  margin: 0;
  background-color: #f5f5f5;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h3 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

img {
  height: 40px;
  margin-right: 20px;
}

.el-aside {
  background-color: #73b46c;
  padding: 20px 0;
  box-shadow: 2px 0 4px rgba(202, 161, 63, 0.1);
}

.el-main {
  background-color: #c6b6b6;
  padding: 20px;
  flex: 1;
}

.tac h5 {
  color: #333;
  font-size: 18px;
  margin: 10px 0;
}

.el-menu-vertical-demo .el-submenu__title {
  color: #333;
}

.el-menu-vertical-demo .el-menu-item {
  color: #333;
}

.el-menu-vertical-demo .el-menu-item-group__title {
  color: #333;
}

.el-menu-item.is-active {
  background-color: #be67bf !important;
}

.el-menu-item:hover {
  background-color: #8d4eab !important;
}
</style>

<script>
export default {
  name: 'App',
};
</script>
